<template>
	<view class="info">
		<view class="container">
			<view class="cell-item" style="border: 0">
				<label>头像</label>
				<button open-type="chooseAvatar" @chooseavatar="onChooseAvatar" class="updateAvatar">
					<image v-if="form.image" :src="form.image"></image>
					<image v-else src="@/static/images/avatar.png" mode="aspectFit"></image>
				</button>
			</view>
			<view class="cell-item">
				<label>昵称</label>
				<input type="nickname" v-model="form.nickname" @blur="onNicknameBlur" placeholder="请输入" :disabled="false" />
			</view>
		</view>
		<view class="container">
			<view class="cell-item" style="border: 0">
				<label>姓名</label>
				<input v-model="form.real_name" placeholder="请输入" :disabled="false" type="text" />
			</view>
			<view class="cell-item" @click="handleActiveInp('sex')">
				<label>性别</label>
				<input :value="setSex(form.sex)" placeholder="请选择" :disabled="true" type="text" />

				<image src="@/static/images/right.png" mode="aspectFit"></image>
			</view>

			<view class="cell-item" @click="handleActiveInp('birthday')">
				<label>生日</label>
				<input v-model="form.birthday" placeholder="请选择" :disabled="true" type="text" />
				<image src="@/static/images/right.png" mode="aspectFit"></image>
			</view>
			<view class="cell-item">
				<label>手机号</label>
				<input v-model="form.phone" placeholder="请输入" :disabled="false" type="number" />
			</view>
		</view>

		<u-datetime-picker
			ref="datetimePicker"
			:show="birthday"
			:formatter="formatter"
			mode="date"
			:showToolbar="false"
			@close="birthday = false"
			:closeOnClickOverlay="true"
			:minDate="0"
			:maxDate="Date.now()"
			@confirm="dateConfirm"
		></u-datetime-picker>
		<u-popup :show="sex" mode="bottom" :closeOnClickOverlay="true" @close="sex = false">
			<view class="sex-box">
				<view class="item-sex" @click="form.sex = item.id" :class="{ active: form.sex == item.id }" v-for="(item, index) in sexs" :key="index">
					<text>{{ item.text }}</text>
				</view>
			</view>
			<footer-btn text="确认" round="40" :footerStyle="{ position: 'sticky' }" @submit="sex = false"></footer-btn>
		</u-popup>
		<u-loading-page :loading="loading"></u-loading-page>
		<footer-btn text="保存" @submit="editUser"></footer-btn>
	</view>
</template>

<script>
import { msg, get_userInfo } from '@/common/common_fun.js';
import { formatDate } from '@/common/date-format.js';
import API from '@/common/api';
export default {
	name: 'info',
	computed: {
		setSex() {
			// 0-未知 1-男 2-女
			return (data) => {
				switch (data) {
					case 0:
						return '';
					case 1:
						return '男';
					case 2:
						return '女';
						break;
					default:
						break;
				}
			};
		}
	},
	data() {
		return {
			loading: false,
			formatDate,
			birthday: false,
			sex: false,
			form: {
				image: '',
				nickname: '',
				real_name: '',
				sex: '',
				birthday: '',
				phone: ''
			},
			sexs: [
				{ id: 1, text: '男', value: '男' },
				{ id: 2, text: '女', value: '女' }
			]
		};
	},
	onReady() {
		// 微信小程序需要用此写法
		this.$refs.datetimePicker.setFormatter(this.formatter);
	},
	onLoad() {
		this.loading = true;
		get_userInfo((data) => {
			this.loading = false;
			data.image = data.user_image;
			data.nickname = data.name;
			data.phone = data.username;
			Object.assign(this.form, data);
		});
	},
	onShow() {},
	beforeDestroy() {
		// this.editUser('beforeDestroy');
	},
	onHide() {
		// this.editUser('onHide');
	},
	methods: {
		onNicknameBlur(e) {
			this.$set(this.form, 'name', e.detail.value);
		},
		dateConfirm(e) {
			this.form.birthday = formatDate(e.value, 'yyyy-MM-dd');
			this.birthday = false;
		},
		formatter(type, value) {
			if (type === 'year') {
				return `${value}年`;
			}
			if (type === 'month') {
				return `${value}月`;
			}
			if (type === 'day') {
				return `${value}日`;
			}
			return value;
		},
		editUser() {
			let my_data = {};
			for (let key of ['image', 'nickname', 'real_name', 'sex', 'phone', 'birthday']) {
				my_data[key] = this.form[key];
			}
		
			API.getJson('users_editInfo', my_data).then((res) => {
				const { code, data, message } = res;
				if (code === 1) {
					this.msg(message,()=>{
						this.toBack();
					})
				}
			});
		},
		handleActiveInp(flag) {
			this[flag] = true;
		},
		//头像
		onChooseAvatar(e) {
			let file = e.detail.avatarUrl;
			API.getUpload('index_ossupload', file, {}).then((res) => {
				const { code, data, message } = res;
				if (code === 1) {
					this.form.image = data;
					this.$store.commit('$setStore', { image: data });
				}
			});
		}
	}
};
</script>

<style lang="less" scoped>
.info {
	.container {
		margin: 24rpx;
		padding: 0rpx 24rpx;
		background: #ffffff;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
	}
}
</style>
